<template>
  <div class="chart-container" ref="chartRef"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import echarts from "../../../utils/echarts";
import type { ECOption } from "../../../utils/echarts";

const chartRef = ref();

onMounted(() => {
  const myEcharts = echarts.init(chartRef.value);
  const option: ECOption = {
    title: {
      text: "学习变化",
      left: "center",
      top: 10,
      textStyle: {
        fontSize: 12,
        color: "#fff",
      },
    },
    xAxis: {
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      axisLabel: {
        fontSize: 8,
        color: "rgba(255,255,255,0.5)",
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.1)",
        },
      },
    },
    yAxis: {
      axisLabel: {
        fontSize: 8,
        color: "rgba(255,255,255,0.5)",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255, 255, 255, 0.1)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.1)",
        },
      },
    },
    series: [
      {
        name: "新增技能",
        type: "line",
        data: [200, 300, 350, 220, 450, 320, 200, 300, 350, 220, 450, 320],
        smooth: true, // 曲线
      },
      {
        name: "新增项目",
        type: "line",
        data: [320, 200, 300, 350, 220, 450, 320, 200, 300, 350, 220, 450],
        smooth: true, // 曲线
      },
    ],
    grid: {
      top: 40,
      right: 10,
      bottom: 25,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: "{a0}: {c0}<br />{a1}: {c1}",
      backgroundColor: "rgba(0, 0, 0, 0.5)",
      borderWidth: 0,
      textStyle: {
        fontSize: 12,
        color: "#fff",
      },
    },
    legend: {
      top: 10,
      right: 10,
      itemWidth: 14,
      itemHeight: 7,
      textStyle: {
        color: "#fff",
        fontSize: 9,
      },
    },
  };
  myEcharts.setOption(option);
});
</script>

<style scoped lang="scss">
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
